import React, { useRef, useState } from 'react';
import { format } from '@/utils/datetime';
import { renderNumber } from '@/utils/common';
import DataTable from '@/components/base/DataTable';
import DataEdit from '@/components/base/DataEdit';
import PageHeader from '@/components/page/PageHeader';
import { AddCompAccoJfxs, DeleteCompAccoJfxs } from '@/services/commCRUD';
import Button from 'antd/lib/button';
import _ from 'lodash';
import { message } from 'antd';
const daoName = 'ShCompAccoJfxs';

const columns: API.Column[] = [
  {
    title: '客户名称',
    width: 210,
    key: 'CUNM',
    dataIndex: 'CUNM',
    sorter: true,
    dispaly: true,
    filter: true,
    ellipsis: true,
  },
  {
    title: '组织机构代码',
    width: 160,
    sorter: true,
    dataIndex: 'ENCD',
    key: 'ENCD',
    dispaly: true,
    filter: true,
  },
  {
    title: '账户',
    width: 180,
    sorter: true,
    dataIndex: 'ACNO',
    key: 'ACNO',
    dispaly: true,
    filter: true,
    ellipsis: true,
  },
  {
    title: '子账户',
    width: 110,
    sorter: true,
    dataIndex: 'BANO',
    key: 'BANO',
    dispaly: true,
    filter: true,
  },
  {
    title: '开户机构',
    width: 120,
    sorter: true,
    dataIndex: 'UTNM',
    key: 'UTNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '科目',
    width: 160,
    sorter: true,
    key: 'ITNM',
    dataIndex: 'ITNM',
    dispaly: true,
    filter: true,
    ellipsis: true,
  },
  {
    title: '开户日期',
    width: 120,
    sorter: true,
    key: 'OPDT',
    dataIndex: 'OPDT',
    dispaly: true,
    filter: true,
    render: (data) => format(data, 'yyyy-MM-dd'),
  },
  {
    title: '起息日',
    width: 120,
    sorter: true,
    key: 'VLDT',
    dataIndex: 'VLDT',
    dispaly: true,
    filter: true,
    render: (data) => format(data, 'yyyy-MM-dd'),
  },
  {
    title: '到期日',
    width: 120,
    sorter: true,
    key: 'MADT',
    dataIndex: 'MADT',
    dispaly: true,
    filter: true,
    render: (data) => format(data, 'yyyy-MM-dd'),
  },
  {
    title: '存期',
    width: 120,
    sorter: true,
    dataIndex: 'RDNM',
    key: 'RDNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '币种',
    width: 120,
    sorter: true,
    dataIndex: 'CYNM',
    key: 'CYNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '当前余额',
    width: 120,
    sorter: true,
    render: (data) => renderNumber('.2f', data),
    key: 'ACBL',
    dataIndex: 'AMAL',
    dispaly: true,
    filter: true,
    align: 'right',
  },
  {
    title: '开户日均',
    width: 150,
    sorter: true,
    render: (data) => renderNumber('.2f', data),
    key: 'AMAL',
    dataIndex: 'AMAL',
    dispaly: true,
    filter: true,
    align: 'right',
  },
  {
    title: '绩效系数',
    width: 120,
    sorter: true,
    dataIndex: 'TZXS',
    key: 'TZXS',
    dispaly: true,
    filter: true,
  },
  {
    title: '费用系数',
    width: 120,
    sorter: true,
    dataIndex: 'TZXS2',
    key: 'TZXS2',
    dispaly: true,
    filter: true,
  },
];
const controls: API.Control[] = [
  {
    name: 'CUNM',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '客户名称',
    grid: 12 / 24,
  },
  {
    name: 'ENCD',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '组织机构代码',
    grid: 12 / 24,
  },
  {
    name: 'ACNO',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '账户',
    grid: 12 / 24,
  },
  {
    name: 'BANO',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '子账户',
    grid: 12 / 24,
  },
  {
    name: 'UTNM',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '开户机构',
    grid: 12 / 24,
  },
  {
    name: 'ITNM',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '科目',
    grid: 12 / 24,
  },
  {
    name: 'OPDT',
    rules: [{ required: true, message: '不能为空' }],
    type: 'date',
    label: '开户日期',
    grid: 12 / 24,
  },
  {
    name: 'VLDT',
    rules: [{ required: true, message: '不能为空' }],
    type: 'date',
    label: '起息日',
    grid: 12 / 24,
  },
  {
    name: 'MADT',
    rules: [{ required: true, message: '不能为空' }],
    type: 'date',
    label: '到期日',
    grid: 12 / 24,
  },
  {
    name: 'RDNM',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '存期',
    grid: 12 / 24,
  },
  {
    name: 'CYNM',
    rules: [{ required: true, message: '不能为空' }],
    type: 'text',
    label: '币种',
    grid: 12 / 24,
  },
  {
    name: 'ACBL',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '当前余额',
    grid: 12 / 24,
  },
  {
    name: 'AMAL',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '开户日均',
    grid: 12 / 24,
  },
  {
    name: 'INRT',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '利率',
    grid: 12 / 24,
  },
  {
    name: 'TZXS',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '绩效系数',
    grid: 12 / 24,
  },
  {
    name: 'TZXS2',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '费用系数',
    grid: 12 / 24,
  },
];
const listcontrols: API.Control[] = [
  {
    name: 'TZXS',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '绩效系数',
    grid: 12 / 24,
  },
  {
    name: 'TZXS2',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '费用系数',
    grid: 12 / 24,
  },
];
const ShCompAccoJfxsForm: React.FC = () => {
  const [showEdit, setShowEdit] = useState<boolean>(false);
  const [acid, setAcid] = useState<number>(0);
  const tableRef = useRef<API.TableAction>();
  const submit = async (vals: Record<string, any>) => {
    if (acid === 0) {
      message.info('请选择要修改的账户');
      return;
    }
    AddCompAccoJfxs(acid, vals.TZXS, vals.TZXS2)
      .then(function () {
        if (tableRef.current) {
          message.info('修改成功');
          tableRef.current?.reload();
        }
      })
      .catch(function (ex) {
        console.error('修改绩费参数出错', ex);
      });
  };
  return (
    <PageHeader>
      <div style={{ marginTop: -5, marginBottom: 10 }}>
        <DataEdit
          showType="inner"
          layout="inline"
          title="对公存款绩费系数"
          controls={listcontrols}
          visible={showEdit}
          onSumit={submit}
          onVisibleChange={(visible) => setShowEdit(visible)}
          renderButtons={(p) => {
            return [
              <Button type="primary" key="submit" onClick={() => p.form?.submit?.()}>
                修改
              </Button>,
              <Button
                type="default"
                key="rest"
                onClick={() => {
                  if (acid === 0) {
                    message.info('请选择要恢复的账户');
                    return;
                  }
                  DeleteCompAccoJfxs(acid)
                    .then(function () {
                      if (tableRef.current) {
                        message.info('恢复成功');
                        tableRef.current?.reload();
                      }
                    })
                    .catch(function (ex) {
                      console.error('恢复绩费参数出错', ex);
                    });
                }}
              >
                恢复
              </Button>,
            ];
          }}
        />
      </div>

      <DataTable
        actionRef={tableRef}
        daoName={daoName}
        columns={columns}
        controls={controls}
        keyColName={'ACID'}
        title="对公存款绩费系数"
        pageSize={20}
        onSelectChange={async (keys) => {
          if (!_.isEmpty(keys)) {
            setAcid(keys[0] as number);
          }
        }}
      />
    </PageHeader>
  );
};

export default ShCompAccoJfxsForm;
